<template>
	<view class="container">
		<swiper :indicator-dots="true" :autoplay="true" indicator-color="#ccc" indicator-active-color="#007aff"
			:interval="3000" :duration="1000">
			<swiper-item v-for="item in banner" @click="to(item.targetId)">
				<view class="swiper-item">
					<image :src="baseUrl+item.advImg" style="width: 100%;" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<uni-card title="推荐服务" style="margin-top: 10px;">
			<view class="" style="display: flex;flex-wrap: wrap;">
				<view v-for="(item,index) in service" style="margin-bottom: 10px;text-align: center;width: 25%;"
					@click="$toService(item.serviceName)" :key="index">
					<image :src="baseUrl+item.imgUrl" style="height: 50px;width: 50px;" mode=""></image>
					<view class="" style="color: #737373;font-size: 13px;margin-top: 5px;">{{item.serviceName}}</view>
				</view>
			</view>
		</uni-card>
		<uni-card title="新闻列表" style="margin-top: 10px;">
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view style="display: flex;">
					<view v-for="(item,index) in category" :style="current===index?'color:#007aff':''"
						style="margin-right: 15px;" @click="getList(item.id,index)" :key="index">
						<view class="">{{item.name}}</view>
						<view class="" v-if="current===index"
							style="width: 100%;height: 3px;background-color: #007aff;margin-top: 3px;"></view>
					</view>
				</view>
			</scroll-view>
			<view class="" style="margin-top: 10px;">
				<view v-for="(item,index) in list" :key="index" @click="to(item.id)">
					<image :src="baseUrl+item.cover" style="width: 100%;height: 150px;" mode=""></image>
					<view class="item" style="color: #252525;">{{item.title}}</view>
					<view class="item" style="color: #737373;
					display: -webkit-box;
					    -webkit-box-orient: vertical;
					    overflow: hidden;
					    -webkit-line-clamp: 2;
					">
						<view class="" v-html="item.content"></view>
					</view>
					<view class="item"
						style="display: flex;justify-content: space-between;font-size: 12px;color: #737373;">
						<view class="">评论总数：{{item.commentNum}}</view>
						<view class="">发布时间：{{item.publishDate}}</view>
					</view>
					<view class="line"></view>

				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				service: [],
				category: [],
				list: [],
				current: -1
			};
		},
		onLoad(item) {

		},
		onReady() {
			this.get('/prod-api/api/rotation/list', {
				type: '2'
			}, ).then(res => {
				let data = res.rows
				this.banner = data
			})
			this.get('/prod-api/api/service/list', {

			}, ).then(res => {
				let data = res.rows.slice(0, 8)
				data[7].serviceName = "更多服务"
				this.service = data
			})
			this.get('/prod-api/press/category/list', {

			}, ).then(res => {
				let data = res.data
				this.category = data
				this.getList(data[0].id, 0)
			})
		},
		onShow() {

		},
		methods: {
			to(id) {
				uni.navigateTo({
					url: 'detail/detail?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getList(id, index) {
				if (this.current === index) {
					return
				}
				this.current = index
				this.get('/prod-api/press/press/list', {
					type: id
				}, 1).then(res => {
					let data = res.rows
					this.list = data

				})
			}
		}
	};
</script>

<style lang="scss">

</style>
